<template>
  <ve-card title="增值服务费" :showDivider="false" :customContentStyle="computeContentStyle" v-bind="$attrs">
    <div class="add-service-option-list" :style="{ 'padding-top': inlineCard ? '24rpx' : '32rpx' }">
      <view
        class="choice-item"
        :class="[feeDetailItem.statics ? 'active' : '']"
        v-for="(feeDetailItem, feeDetailItemIndex) in feeOption.childrenList"
        :key="feeDetailItemIndex"
        @tap="choicItemTap(feeDetailItem)"
      >
        {{ feeDetailItem.itemName }}
      </view>
    </div>
    <div :class="[shadow ? 'page-form-block' : '']" v-if="checkedaddServiceFeeList.length > 0">
      <ve-form-item
        v-for="(feeDetailItem, feeDetailItemIndex) in checkedaddServiceFeeList"
        :key="feeDetailItemIndex"
        :label="feeDetailItem.itemName"
        :labelWidth="200"
        :borderBottom="feeDetailItemIndex != checkedaddServiceFeeList.length - 1"
        unit="元"
      >
        <ve-input-number
          :precision="2"
          :model-value="feeDetailItem.amount"
          @blur="(val) => (feeDetailItem.amount = val)"
          @clear="() => (feeDetailItem.amount = '')"
        />
        <template #rightContent v-if="feeDetailItem.showCostTypeSwitch">
          <ve-radio v-model="feeDetailItem.costType" :list="feeCostTypeOptionList" />
        </template>
      </ve-form-item>
    </div>
  </ve-card>
</template>
<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    shadow: {
      type: Boolean,
      default: true,
    },
    index: Number,
    list: Array,
    showDivider: {
      type: Boolean,
      default: true,
    },
    inlineCard: Boolean,
  })

  const feeCostTypeOptionList = [
    {
      label: '收款',
      value: 10,
    },
    {
      label: '付款',
      value: 20,
    },
  ]

  const choicItemTap = (item) => {
    item.statics = !item.statics
  }

  const feeOption = computed(() => {
    return props.list[props.index]
  })

  // 选中的增值服务费(optionList)
  const checkedaddServiceFeeList = computed(() => {
    return feeOption.value.childrenList?.filter((item) => {
      return item.statics
    })
  })
  const computeContentStyle = computed(() => {
    if (props.inlineCard) {
      return {}
    } else {
      return { paddingTop: 0, paddingBottom: checkedaddServiceFeeList.value.length > 0 ? '32rpx' : '16rpx' }
    }
  })
</script>
<style lang="less" scoped>
  .add-service-option-list {
    .choice-item {
      height: 72rpx;
      line-height: 68rpx;
      padding: 0 30rpx;
      background: #f3f7ff;
      border-radius: 4rpx;
      margin-bottom: 24rpx;
      margin-right: 24rpx;
      font-size: 26rpx;
      color: #1d2129;
      display: inline-flex;

      border: 2rpx solid transparent;
      &.active {
        border: 2rpx solid #3072f6ff;
        color: #3072f6ff;
      }
    }
  }

  .page-form-block {
    background: #f6f7fbff;
    padding: 0 24rpx;
  }
</style>
